import React, { useState, useEffect } from 'react'
import { Button, Form, Input, Select, DatePicker } from 'antd';
import { Space, Table, Modal, Upload, Image, Typography, Popover, Tag } from 'antd';
import axios from "axios"
import { UploadOutlined } from '@ant-design/icons';
import { ExclamationCircleTwoTone, CheckCircleTwoTone, ClockCircleTwoTone } from '@ant-design/icons'

const { Option } = Select;
const { TextArea } = Input;
const { Text } = Typography


const Detail = (prop) => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [perface, setPerface] = useState()
    const [address, setAddress] = useState()

    useEffect(() => {

    }, [])

    const showModal = async () => {
        await axios.get(`http://localhost:1234/works/details?id=${prop.item.id}`)
            .then(res => {
                if (res[0].address == '') {
                    setAddress('')
                }
                else {
                    setAddress(`http://localhost:1234/works/video?address=/public/images/${res[0].address}`)
                }

                if (res[0].perface == '') {
                    setPerface('')
                }
                else {
                    setPerface(`http://localhost:1234/works/image?perface=/public/images/${res[0].perface}`)
                }

            })
        setIsModalOpen(true)
    }

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const handleOk = () => {
        setIsModalOpen(false)
    }

    const onTypeChange = (value) => {
        console.log(value)
    };

    const onFinish = (value) => {
        value.page = perface.split('=')[1]
        value.content = address.split('=')[1]
        console.log(value)

        axios.post(`http://localhost:1234/works/update?id=${prop.item.id}`, value)
            .then(res => {
                console.log(res)
            })

        setIsModalOpen(false)
    }

    return (
        <div>
            {/* <a onClick={showModal}>详情</a> */}
            <Button 
                type="primary"
                size="small"
                onClick={showModal}
                style={{ backgroundColor: '#FEB955' }}
            >详情</Button>

            <Modal
                title='详情'
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
                footer={null}
            >
                <Form onFinish={onFinish} >
                    <Form.Item
                        name="title"
                        label="标题"
                        style={{ width: '300px', margin: '20px' }}
                        initialValue={prop.item.title}
                    >
                        <Input disabled />
                    </Form.Item>
                    {
                        perface == '' ? <></> :
                        <Form.Item
                            name="page"
                            label="封面"
                            style={{ width: '300px', margin: '20px' }}
                        >
                            <Image
                                width={200}
                                src={perface}
                                preview={{
                                    src: perface,
                                }}
                            />
                        </Form.Item>
                    }
                    <Form.Item
                        name="author"
                        label="作者"
                        style={{ width: '300px', margin: '20px' }}
                        initialValue={prop.item.name}
                    >
                        <Input disabled />
                    </Form.Item>
                    <Form.Item
                        name="createTime"
                        label="创建时间"
                        style={{ width: '300px', margin: '20px' }}
                        initialValue={prop.item.date}
                    >
                        <Input disabled />
                    </Form.Item>
                    <Form.Item
                        name="type"
                        label="内容载体"
                        style={{ width: '300px', margin: '20px' }}
                        initialValue={prop.item.type}
                    >
                        <Select
                            placeholder="Select a option and change input text above"
                            onChange={onTypeChange}
                            disabled
                        >
                            <Option value="video">视频</Option>
                            <Option value="image-text">图文</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        name="description"
                        label="作品描述"
                        style={{ width: '300px', margin: '20px' }}
                        initialValue={prop.item.detail}
                    >
                        <TextArea rows={4} disabled />
                    </Form.Item>
                    {
                        address == '' ? <></> : 
                        <Form.Item
                            name="content"
                            label="作品内容"
                            style={{ width: '300px', margin: '20px' }}
                        >
                            <video controls style={{ width: '300px' }}>
                                <source src={address} type="video/mp4" />
                            </video>
                        </Form.Item>
                    }

                </Form>
            </Modal>
        </div>
    )
}

const Commnets = (prop) => {

    const columns = [
        {
            title: '编号id',
            dataIndex: 'id',
            key: 'id'
        },
        {
            title: '评论内容',
            dataIndex: 'comments',
            key: 'comments'
        },
        {
            title: '发起人',
            dataIndex: 'name',
            key: 'name'
        },

        {
            title: '创建时间',
            dataIndex: 'date',
            key: 'date'

        },
        {
            title: '点赞数',
            dataIndex: 'comlike',
            key: 'comlike'
        }
    ]

    const [isModalOpen, setIsModalOpen] = useState(false);
    const [data, setData] = useState()

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const handleOk = () => {
        setIsModalOpen(false)
    }

    const showModal = async () => {
        await axios.get(`http://localhost:1234/works/comments?id=${prop.item.id}`)
            .then(res => {
                console.log(res)
                setData(res)

            })
        setIsModalOpen(true)
    }

    return (
        <div>
            {/* <a onClick={showModal}>查看评论</a> */}
            <Button
                type="primary"
                size="small"
                onClick={showModal}
                style={{ backgroundColor: '#2197CF' }}
            >查看评论</Button>

            <Modal
                title='评论'
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
                footer={null}
            >
                <Table columns={columns} dataSource={data} />
            </Modal>
        </div>
    )
}


const Forum = () => {
    const [data, setData] = useState([])

    useEffect(() => {
        axios.get('http://localhost:1234/works/data')
            .then(res => {
                setData(res)
            })
    }, [])




    const check = (record) => {
        console.log('check: ', record.id)
        axios.get(`http://localhost:1234/works/check?id=${record.id}&audit=${record.audit}`)
            .then(res => {
                if (res == 'success') {
                    axios.get('http://localhost:1234/works/data')
                        .then(res => {
                            setData(res)
                        })
                }
            })
    }


    const columns = [
        {
            title: '',
            dataIndex: '1',
            key: '1',
            render: (_, record) => (
                <div>
                    {
                        record.audit
                            ?
                            <Popover content='已解决'>
                                <CheckCircleTwoTone twoToneColor="#52c41a" />
                            </Popover>
                            :
                            <Popover content='待回复'>
                                <ExclamationCircleTwoTone twoToneColor="#eb2f96" />
                            </Popover>
                    }
                </div>)
        },
        {
            title: '编号id',
            dataIndex: 'id',
            key: 'id'
        },
        {
            title: '标题',
            dataIndex: 'title',
            key: 'title'
        },
        {
            title: '内容载体',
            dataIndex: 'type',
            key: 'type',
            render: (type) => {
                if (!Array.isArray(type)) {
                    type = type.split(',');
                }
                let color 
                if (type[0] == '图文') {
                    color = 'blue'
                }
                else {
                    color = 'volcano'
                }
                return (
                    <>
                        {type.map(tag => (
                            <Tag color={color} key={tag}>
                                {tag}
                            </Tag>
                        ))}
                    </>
                );
            }
        },
        {
            title: '作者',
            dataIndex: 'name',
            key: 'name'
        },
        {
            title: '点赞数',
            dataIndex: 'likenum',
            key: 'likenum'
        },
        {
            title: '收藏数',
            dataIndex: 'collect',
            key: 'collect'
        },
        {
            title: '创建时间',
            dataIndex: 'date',
            key: 'date'

        },
        {
            title: '操作',
            dataIndex: 'operate',
            render: (_, record) => (
                <Space size="middle">
                    <Detail item={record} />
                    <Commnets item={record} />
                    {
                        record.audit
                            // ? <Text type="secondary">已审核</Text>
                            ? <Button
                                type="primary"
                                size="small"
                                disabled
                            >已审核</Button>
                            // : <a onClick={() => check(record)}>待审核</a>
                            : <Button
                                type="primary"
                                size="small"
                                onClick={() => check(record)}
                                style={{ backgroundColor: '#D64E31' }}
                            >待审核</Button>
                    }
                </Space>
            ),
        }
    ];



    return (
        <div>

            <div>
                <Table columns={columns} dataSource={data} />
            </div>
        </div>
    )

}

export default Forum